<template>
  <el-dialog
    v-model="visible"
    title="关闭提示"
    width="350px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    @closed="onDialogClosed"
  >
    <div>是否最小化到右下角托盘？</div>
    <el-checkbox v-model="dontAskAgain" style="margin-top: 16px;">下次不再提示</el-checkbox>
    <template #footer>
      <el-button @click="handle('close')">直接退出</el-button>
      <el-button type="primary" @click="handle('minimize')">最小化到托盘</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, watch } from 'vue'
const props = defineProps({
  modelValue: Boolean
})
const emit = defineEmits(['update:modelValue', 'close'])
const visible = ref(props.modelValue)
const dontAskAgain = ref(false)
watch(() => props.modelValue, v => visible.value = v)
watch(visible, v => emit('update:modelValue', v))
function handle(action) {
  emit('close', action, dontAskAgain.value)
  visible.value = false
}
function onDialogClosed() {
  dontAskAgain.value = false
}
</script> 